<template>
  <div class="container">
    <MyNav>注册</MyNav>
    <LoginRegion></LoginRegion>
    <!--    注册-->
    <van-form @submit="onSubmit" label-width="70px">
      <van-field
          v-model="phoneNum"
          name="phoneNum"
          label="手机号"
          required
          placeholder="请填写手机号"
          :rules="[{pattern:pattern1, required: true, message: '请正确填写11位手机号' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码(不得小于6位)"
          required
          :rules="[{ validator, required: true, message: '密码不得小于6位' }]"
      />
      <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          required
          :rules="[{ required: true, message: '用户名不能为空' }]"
      />
      <van-field
          v-model="loginName"
          name="loginName"
          label="账号"
          placeholder="请自定义账号并牢记"
          required
          :rules="[{ pattern:pattern2, required: true, message: '账号只能由6位以上数字和字母组成' }]"
      />
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--      {{sex}}-->
      <van-field
          v-model="sms"
          center
          clearable
          label="短信验证码"
          placeholder="请输入验证码"
          required
          :rules="[{ validator1,required: true, message: '请正确输入验证码' }]"
      >
        <template #button>
          <van-button size="small" v-if="$store.state.show" type="primary" @click.prevent="identifyingCode" color="#67ABD6" plain>发送验证码</van-button>
          <van-button size="small" v-if="!$store.state.show" type="primary" disabled color="#67ABD6" plain>{{$store.state.count}} 秒后重试</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit" color="#67ABD6" plain>注 册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import {enrollList, Sms} from "@/api/http";
import LoginRegion from "@/components/LoginRegion";
import { Toast } from 'vant';
import MyNav from "@/components/MyNav";
export default {
  name: "RegisterView",
  components:{
    LoginRegion,
    MyNav,
  },
  data(){
    return {
      username: '',
      password: '',
      loginName:'',
      phoneNum:'',
      sms:'',
      //单选框
      radio: '0',
      //倒计时
      timer: null,
      //校验电话号码
      pattern1:/^1[3|4|5|7|8][0-9]{9}$/,
      //校验账号
      pattern2:/^(?=.*\d)(?=.*[A-z])[\da-zA-Z]{6,}$/
    }
  },
  methods:{
    //校验密码
    validator(val) {
      return /\d{6}/.test(val);
    },
    //注册按钮
    onSubmit(values) {
      console.log('submit', values);
      // console.log('User'+this.phoneNum)
      enrollList(this.loginName,this.sms,this.phoneNum,this.password,this.username,this.radio,"这个人很懒什么都没留下").then(res=>{
        console.log(res)
        if(res.code == 0){
          Toast.success('注册成功！');
          setTimeout(()=>{
            this.$router.go(-1);
          },500)
        }else{
          Toast.fail(res.msg+'，请重试！');
          if(res.msg=='账号重复'){
            this.$store.commit('changeShow',true);
            this.$store.commit('getCount',0)
          }
        }
      })
    },
    //  获取验证码按钮 倒计时
    identifyingCode(){
      // 发送请求
      if(this.phoneNum) {
        Sms(this.phoneNum).then(res=>{
          console.log(res);
          if(res.code == 0){
            Toast.success('发送成功，请注意查收');
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.$store.commit('getCount',TIME_COUNT);
              // this.show = false;
              this.$store.commit('changeShow',false);
              this.timer = setInterval(() => {
                if (this.$store.state.count > 0 && this.$store.state.count <= TIME_COUNT) {
                  this.$store.commit('changeCount');
                  this.$store.getters.getMyCount;
                } else {
                  this.$store.commit('changeShow',true);
                  // this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000)
            }
          } else {
            Toast.fail('发送失败，请重试！');
          }
        })
      }else{
        Toast.fail('请正确输入手机号');
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {

  .myLink {
    display: block;
    height: 42px;
    border: 1px solid #67ABD6;
    line-height: 42px;
    text-align: center;
    color: #67ABD6;
  }
}
</style>